<template>
  <div class="job_info_page">
    <van-nav-bar
      title="我的任务"
      left-arrow
      @click-left="onClickLeft"/>
    <div id="jobInfo" style="margin-top: 10px">
      <van-cell-group>
        <van-cell title="流水号" :value=jobInfo.FLOWNO />
        <van-cell title="交易时间">
          <template #default>{{jobInfo.SUBMITTIME | dateFormat}}</template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="付款方名称" :value=jobInfo.PAYACCNAME />
        <van-cell title="付款账号">
          <template #default>{{jobInfo.PAYACCNO | account}}</template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="收款方名称" :value=jobInfo.RCVACCNAME />
        <van-cell title="收款账号">
          <template #default>{{jobInfo.RCVACCNO | account}}</template>
        </van-cell>
        <van-cell title="开户行名称" :value=jobInfo.RCVACCBANKNAME />
        <van-cell title="金额">
          <template #default>{{jobInfo.TRANAMT | currency}}</template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="制单人" :value=jobInfo.OPERNAME />
        <van-cell title="状态" :value='jobInfo.RESULTSTATUS'>
          <template #default>{{jobInfo.RESULTSTATUS | applyType}}</template>
        </van-cell>
      </van-cell-group>
    </div>
    <div id="btn_op" v-show="apply" class="btn_op">
      <span class="let_btn">
        <van-button @click="onClickRefuse" color="#C7E0EE">拒绝</van-button>
      </span>
      <span style="margin-left: 20px">
        <van-button @click="onClickAccept" color="linear-gradient(to right, #20B1F2, #1393D3)">通过
        </van-button>
      </span>
    </div>
    <van-dialog v-model="refuse" title="提示" show-cancel-button @confirm = "onConfirmRef">
      <van-field v-model="reason" label="拒绝原因" placeholder="请输入拒绝原因" />
    </van-dialog>
  </div>
</template>

<script>
import {
  CellGroup,
  Dialog,
  Toast,
} from 'vant';
import { queryAuthDetailTransfer, updateAuthFlwRequest } from '@/libs/api';

export default {
  components: {
    [CellGroup.name]: CellGroup,
    [Dialog.Component.name]: Dialog.Component,
    [Toast.name]: Toast,
  },
  data() {
    return {
      recordID: '',
      busCode: '',
      jobInfo: {},
      qryParam: {},
      refuse: false,
      reason: '',
      apply: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickAccept() {
      this.$router.push('workResult');
      this.refuseflg = '0';
      this.updateRecordInfo('0');
    },
    onClickRefuse() {
      this.reason = '';
      this.refuse = true;
    },
    onConfirmRef() {
      this.refuse = false;
      console.log('*****onConfirmRef*****');
      if (this.reason.length < 1) {
        Toast('请输入拒绝原因');
        return;
      }
      this.updateRecordInfo('1');
    },
    updateRecordInfo(refuseflg) {
      const updateParam = {};
      updateParam.cstNo = this.$store.state.loginUser.cichno;
      updateParam.hostNo = this.$store.state.loginUser.cino;
      updateParam.operNo = this.$store.state.loginUser.userId;
      updateParam.bsnCode = this.busCode;
      updateParam.authFlag = refuseflg;
      updateParam.rejReson = this.reason;
      updateParam.serviceName = 'Transfer_U_updateAuthFlwTransfer';
      updateParam.flowList = [{ flowNo: this.recordID }];
      updateAuthFlwRequest(this, updateParam).then((res) => {
        console.log(res);
        if (refuseflg === '1') {
          Toast(res.message);
          this.$router.go(-1);
        } else {
          this.$router.push('workResult');
        }
      });
    },
    getJobInfo() {
      console.log('begin getJobInfo');
      this.qryParam.cstNo = this.$store.state.loginUser.cichno;
      this.qryParam.hostNo = this.$store.state.loginUser.cino;
      this.qryParam.operNo = this.$store.state.loginUser.userId;
      this.qryParam.flowNo = this.recordID;
      this.qryParam.bsnCode = this.busCode;
      this.qryParam.serviceName = 'Transfer_Q_readyAuthDetailTransfer';
      queryAuthDetailTransfer(this, this.qryParam).then((res) => {
        console.log(res);
        if (res.retCode === 'CIP0000000') {
          this.jobInfo = res.readyAuthData;
        }
      });
    },
  },
  mounted() {
    this.getJobInfo();
  },
  created() {
    this.recordID = this.$route.params.FLOWNO;
    this.busCode = this.$route.params.busCode;
    this.apply = this.$route.params.apply;
    console.log(this.$route.params);
  },
};
</script>

<style lang="less">
.job_info_page{
  background-color: #f3f6f9;
  height: 100vh;
  .van-cell__value {
    min-width: 70%;
  }
  .van-cell__value span {
    display: inline-block;
    text-align: left;
    word-break: break-all;
  }
  .btn_op{
    text-align: center;
    margin-top: 50px;
  }
  .btn_op button{
    width: 100pt;
  }
  .let_btn{
    margin-right: 20px
  }
  .let_btn button div span{
    color: black;
  }
}
</style>
